<template>
    <el-card>
        <div class="mt">
            <span class="title">文章类型：</span>
            <el-tag :type="currentIndex[0] === -1 ? 'primary' : 'info'" class="mr"
                @click="changeCurrentIndex(-1, 0, '')">全部</el-tag>
            <el-tag class="mr" :type="currentIndex[0] === index ? 'primary' : 'info'"
                v-for="(item, index) in typeList?.type" :key="item" @click="changeCurrentIndex(index, 0, item)">{{ item
                }}</el-tag>
        </div>
        <div class="mt">
            <span class="title">重要程度：</span>
            <el-tag :type="currentIndex[1] === -1 ? 'primary' : 'info'" class="mr"
                @click="changeCurrentIndex(-1, 1, '')">全部</el-tag>
            <el-tag class="mr" :type="currentIndex[1] === index ? 'primary' : 'info'"
                v-for="(item, index) in typeList?.important" :key="item" @click="changeCurrentIndex(index, 1, item)">{{
                    item }}</el-tag>
        </div>
        <div class="mt">
            <span class="title">发布渠道：</span>
            <el-tag :type="currentIndex[2] === -1 ? 'primary' : 'info'" class="mr"
                @click="changeCurrentIndex(-1, 2, '')">全部</el-tag>
            <el-tag class="mr" :type="currentIndex[2] === index ? 'primary' : 'info'"
                v-for="(item, index) in typeList?.publish" :key="item" @click="changeCurrentIndex(index, 2, item)">{{
                    item
                }}</el-tag>
        </div>
        <el-divider></el-divider>
        <div class="mt">
            <span class="title">已选:</span>
            <el-tag type="success" class="mr" @close="delTag(item.num)" closable v-for="(item, index) in selectList"
                :key="item.num">{{ item.name }}</el-tag>
        </div>
    </el-card>
    <el-button class="mt mb" type="primary" @click="exportHTML">导出富文本到HTML文件</el-button>
    <editor id="uuid" v-model='editorContent' api-key="xvbamfm2vokka8qoim9r801qtdlldskjschd51yha7zhuusp" :init="{
        
        language: 'zh-CN',
        plugins: 'advlist anchor autolink charmap code fullscreen help image insertdatetime link lists media preview searchreplace table visualblocks wordcount',
        toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        height: 500,

    }" />
</template>

<script lang="ts" setup>
import { getDocumentAPIList } from '@/api/document'
import { ref, onMounted } from 'vue'
import Editor from '@tinymce/tinymce-vue'
interface ListType {
    type: string[],
    important: string[],
    publish: string[]
}
interface SelectType {
    name: string,
    num: number
}
const typeList = ref<ListType>()
const loadData = async () => {
    const res = await getDocumentAPIList()
    typeList.value = res.data
    console.log(typeList.value)
}

const currentIndex = ref([-1, -1, -1])
onMounted(() => {
    loadData()
})
const changeCurrentIndex = (index: number, num: number, name: string) => {
    const idx: number = selectList.value.findIndex((item: SelectType) => item.num === num)
    console.log(idx)
    if (!name) {
         selectList.value = selectList.value.filter((item: SelectType) => item.num != num)
    } else {
        if (idx == -1) {
            selectList.value.push({ name, num })
        } else {

            selectList.value[idx] = { name, num }
        }
    }
    currentIndex.value[num] = index
}

const selectList = ref<SelectType[]>([]) //[{name:'ccc',number:"0"}]
const delTag = (num: number) => {
    selectList.value = selectList.value.filter((item: SelectType) => item.num != num)
    currentIndex.value[num] = -1
}

const editorContent = ref('')
const exportHTML = ()=>{
    // 资源地址
   const blob = new Blob([editorContent.value],{type:'text/html'})
   const link = document.createElement('a')
   // 将资源地址转化成下载的url
   link.href = URL.createObjectURL(blob)
   link.download = 'document.html'
   link.click();
   URL.revokeObjectURL(link.href)
}
</script>

<style scoped lang="less">
.title {
    display: inline-block;
    width: 80px;
    font-size: 14px;
}

.el-tag:hover {
    cursor: pointer;
}
</style>